<template>
	<view>
		<navbar title="我的优惠券"></navbar>
		<view class="tabs-box">
			<view class="tabs fa jcsb">
				<view class="tab" :class="{active: index == tabIndex}" v-for="(item, index) in tabList" :key="index" @click="tabChange(index)">
					<view class="pr">{{item}}</view>
				</view>
			</view>
			<view class="tabs-place"></view>
		</view>
		<view class="coupon-box">
			<view class="coupon-list fa" v-for="(item, index) in couponList" :key="index" :class="{grey: item.state > 0}">
				<view class="money fa">
					<view class="rmb">¥</view>
					<view>{{item.derate}}</view>
				</view>
				<view class="title-box">
					<view class="full">满{{item.need}}使用</view>
					<view class="time" v-if="item.timer">{{item.timer}}到期</view>
				</view>
				<view class="usebtn" v-if="item.state == 0">可使用</view>
				<view class="usebtn" v-if="item.state == 1">已使用</view>
				<view class="usebtn" v-if="item.state == 2">已过期</view>
				<view class="red-paper">新人红包</view>
			</view>
		</view>
		<view class="nodata-box" v-if="nodata">
			<image class="nodata-img" src="../../static/nodata.png" mode=""></image>
			<view class="nodata-prompt">暂无优惠券~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ['可使用', '已使用', '已过期'],
				tabIndex: 0,
				couponList: [],
				nodata: 0
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			tabChange(index) {
				this.tabIndex = index
				this.getList()
			},
			getList() {
				this.nodata = 0
				this.api.myCouponFunc({
					state: this.tabIndex
				}).then(res => {
					if(res.code == 200) {
						this.couponList = res.data
						this.nodata = this.couponList.length > 0 ? 0 : 1
						this.couponList.forEach(item => {
							item.createTime = item.createTime.substr(0, 9)
						})
					}
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.tabs{
		position: fixed;
		left: 0;
		right: 0;
		z-index: 999;
		padding: 0 90rpx;
		height: 80rpx;
		background-color: #fff;
		box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E6E6E6;
		.tab{
			position: relative;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			color: #777;
			&.active{
				font-weight: bold;
				color: #333;
				&::after{
					content: '';
					position: absolute;
					bottom: 20rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 90rpx;
					height: 10rpx;
					border-radius: 6rpx;
					background: linear-gradient( 270deg, #fff 0%, #3DBF63 100%);
					z-index: -1;
				}
			}
		}
	}
	.tabs-place{
		height: 80rpx;
	}
	.coupon-box{
		padding: 24rpx;
		.coupon-list{
			position: relative;
			margin-bottom: 24rpx;
			padding: 0 32rpx 0 48rpx;
			height: 180rpx;
			border-radius: 20rpx;
			color: #FE3134;
			background-color: #FFF7E3;
			&.grey{
				filter: grayscale(1);
			}
			.money{
				flex-basis: 30%;
				font-size: 58rpx;
				font-weight: bold;
				color: #FF2F2F;
				.rmb{
					font-size: 38rpx;
				}
			}
			.title-box{
				padding: 0 10rpx;
				flex-basis: 46%;
				.full{
					font-size: 32rpx;
					font-weight: bold;
				}
				.time{
					margin-top: 8rpx;
					font-size: 20rpx;
				}
			}
			.usebtn{
				position: relative;
				padding-left: 10rpx;
				flex-basis: 24%;
				text-align: right;
				font-size: 32rpx;
				font-weight: bold;
				&::after{
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 2rpx;
					height: 84rpx;
					border-left: 2rpx dashed #DC4A37;
				}
			}
			.red-paper{
				position: absolute;
				top: 0;
				left: 0;
				padding: 0 16rpx;
				border-radius: 20rpx 0 20rpx 0;
				height: 36rpx;
				line-height: 36rpx;
				font-size: 22rpx;
				color: #fff;
				background: linear-gradient( 85deg, #FE5224 0%, #FD8B24 100%);
			}
		}
	}
</style>
